<template>
  <view class="login">
    <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
    <button class="login-btn" @click="loginBtn">一键登录</button>
    <text class="text-tip">登录后尽享更多权益</text>
  </view>
</template>

<script>
  import { mapState, mapMutations } from 'vuex'
  export default {
    name:"my-login",
    computed: {
      ...mapState('m_user', ['redirectInfo'])
    },
    data() {
      return {
        
      };
    },
    methods: {
      ...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateRedirectInfo']),
      loginBtn() {
        uni.getUserProfile({
          desc: '你的授权信息',
          success: (res) => {
            this.updateUserInfo(res.userInfo)
            this.updateToken('Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjEyLCJpYXQiOjE1MjU0MDIyMjMsImV4cCI6MTUyNTQ4ODYyM30.g-4GtEQNPwT_Xs0Pq7Lrco_9DfHQQsBiOKZerkO-O-o')
            this.navigateBack()
          },
          fail: (res) => {
            return uni.$showMsg('您取消了登录授权')
          }
        })
      },
      navigateBack(){
        if(this.redirectInfo && this.redirectInfo.openType === 'switchTab'){
          uni.switchTab({
            url: this.redirectInfo.from,
            complete: () => {
              this.updateRedirectInfo(null)
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  .login {
    position: relative;
    height: 700rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #F8F8F8;
    overflow: hidden;
    &::after {
      position: absolute;
      bottom: 0;
      left: 0;
      content: '';
      width: 100%;
      height: 150rpx;
      background-color: #fff;
      border-radius: 100%;
      transform: translateY(50%);
    }
    .login-btn {
      width: 90%;
      background-color: #ffbd27;
      border-radius: 200rpx;
      color: #fff;
      margin: 30rpx 0;
    }
    .text-tip {
      font-size: 24rpx;
      color: gray;
    }
  }
</style>